<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>富豪榜</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <!-- 导航栏 -->
  <nav>
    <ul>
      <li>主页</li>
      <li>排行榜</li>
      <li>联系方式</li>
    </ul>
  </nav>
  <!-- 头部内容 -->
  <header>
    <!-- 导航栏的按钮 -->
    <button id="toggle">导航栏</button>
    <!-- 标题 -->
    <h2>欢迎来到富豪排行榜</h2>
    <!-- 欢迎语句 -->
    <p>weclome to the rich rank</p>
  </header>
  <!-- 主题内容 -->
  <div class="container">
    <!-- 左盒子 -->
    <aside>
      <!-- 五个按钮 -->
      <button id="add-user">添加账户</button>
      <button id="double">资金翻倍</button>
      <button id="show-millionaire">查询百万富翁</button>
      <button id="sort">财富榜</button>
      <button id="calculate">计算总额</button>
    </aside>
    <!-- 右盒子 -->
    <main id="main">
      <h2>
        <strong>Person</strong>
        <span>Wealth</span>
      </h2>
    </main>
  </div>

  <script>
    let dataInfo = [{
      name: "安东尼 戴维斯",
      money: 892001
    },
    {
      name: "凯里 欧文",
      money: 668932
    },
    {
      name: "史蒂夫 库里",
      money: 698756
    },
    {
      name: "德里克 罗斯",
      money: 492489
    },
    {
      name: "保罗 乔治",
      money: 853957
    },
    {
      name: "勒布朗 詹姆斯",
      money: 968472
    },
    {
      name: "詹姆斯 哈登",
      money: 718225
    },
    {
      name: "凯文 杜兰特",
      money: 889147
    },
    ];


    let toggle = document.querySelector('#toggle');
    let add_user = document.querySelector('#add-user');
    let double = document.querySelector('#double');
    let pbox = document.getElementsByClassName('person');
    let money = document.getElementsByClassName('money');
    let show_millionaire = document.querySelector('#show-millionaire');
    let sort = document.querySelector('#sort');
    let calculate = document.querySelector('#calculate');

    let nav = document.querySelector('.nav');
    let mainbox = document.querySelector('#main');
    let flag = true;
    let calculateFlag = true;

    let index = 0; // 模拟点击下标(每次自增1)










    //查询百万富翁
    show_millionaire.addEventListener('click', function () {
      let newDataInfo = [];
      for (let i = 0; i < pbox.length; i++) {
        if (dataInfo[i].money > 1000000) {
          newDataInfo.push(dataInfo[i]);
        }
        // console.log(pbox[i]);
      }
      newDataInfo.sort(function (a, b) {
        return b.money - a.money;
      })
      newD.innerHTML = '';
      newDataInfo.forEach(function (item) {
        let newP = document.createElement("p");
        // 新的p添加span
        newP.innerHTML = `
                  <span>${item.name}</span>
                  <span class='money'>\$${item.money}</span>
                  `;
        newP.classList.add('person');
        //  将新的p添加到main
        newD.appendChild(newP);
      });
    });
    //财富榜
    sort.addEventListener('click', function () {
      newD.innerHTML = '';
      dataInfo.sort(function (a, b) {
        return b.money - a.money;
      })
      dataInfo.forEach(function (item) {
        let newP = document.createElement("p");
        // 新的p添加span
        newP.innerHTML = `
                  <span>${item.name}</span>
                  <span class='money'>\$${item.money}</span>
                  `;
        newP.classList.add('person');
        //  将新的p添加到main
        newD.appendChild(newP);
      });
    });
    //计算总额

    calculate.addEventListener('click', function () {
      let newDataInfo = [];
      for (let i = 0; i < pbox.length; i++) {
        newDataInfo.push(dataInfo[i].money);
      }
      let sum = newDataInfo.reduce(function (prev, cur, index, array) {
        return prev + cur;
      });
      let newP = document.createElement("p");
      newP.innerHTML = `
                    <span><strong>总额</strong></span>
                    <span><strong>\$${sum}</strong></span>
                    `;
      newP.classList.add('person');
      // mainbox.appendChild(newP);
      if(calculateFlag){
        mainbox.appendChild(newP);
        calculateFlag=false
      }else{
        mainbox.replaceChild(newP,mainbox.lastChild);
        // newP.remove();
        // mainbox.appendChild(newP);
        // console.log(newP);
      }

      // console.log(newP.children.length);

    });
    //资金翻倍
    double.addEventListener('click', function () {
      for (let i = 0; i < pbox.length; i++) {
        dataInfo[i].money = dataInfo[i].money * 2;
        money[i].innerHTML = '$' + dataInfo[i].money;
        // console.log(dataInfo[i].money * 2);
      }
    });

    //导航栏
    toggle.addEventListener('click', function () {
      if (flag) {
        document.body.style.transform = 'translate(200px)';
        flag = false;
      } else {
        document.body.style.transform = 'translate(0px)';
        flag = true
      }
    });
    //添加账户
    let newD = document.createElement("div");
    mainbox.appendChild(newD);
    add_user.addEventListener('click', function () {
      // console.log(money);
      if (index < dataInfo.length) {
        // 创建新的p
        let newP = document.createElement("p");
        // 新的p添加span
        newP.innerHTML = `
                  <span>${dataInfo[index].name}</span>
                  <span class='money'>\$${dataInfo[index].money}</span>
                  `;
        newP.classList.add('person');
        //  将新的p添加到main
        newD.appendChild(newP);
        index++;
      }
    });
  </script>
</body>

</html>